﻿@page "/customization/overview"

<DocsPage>
    <DocsPageHeader Title="Theming" SubTitle="Customize MudBlazor so that it suits your needs. Change colors, typography, shapes and more." />
    <DocsPageContent>
        
        <DocsPageSection>
            <SectionHeader Title="Theme Provider">
                <Description>
                    The Theme provider specifies all the colors, shapes, sizes and shadows to your layout.
                    No configuration or theme is needed, by default it will use MudBlazor's default theme.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverviewThemesDefaultExample)" />
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Variables">
                <Description>At the moment, it's possible to change the following theme types.</Description>
            </SectionHeader>
            <ul class="docs-list mx-2">
                <li><MudLink Href="/customization/palette">Palette</MudLink></li>
                <li><MudText HtmlTag="span">Shadows</MudText></li>
                <li><MudLink Href="/customization/typography">Typography</MudLink></li>
                <li><MudText HtmlTag="span">Layout Properties</MudText></li>
                <li><MudLink Href="/customization/z-index">z-index</MudLink></li>
                <li><MudText HtmlTag="span">Pseudo CSS scope</MudText></li>
                <li><MudLink Href="/customization/pseudocss">Pseudo CSS</MudLink></li>
            </ul>
            <MudText Class="mt-4">You can find all the <MudLink Href="/customization/default-theme" Color="Color.Secondary">Default Theme</MudLink> values under customization.</MudText>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Scrollbar">
                <Description>The MudBlazor styled scrollbar can be turned off in the themeprovider with the <CodeInline>DefaultScrollbar</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverviewThemesScrollbarExample)" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dark Palette">
                <Description>Dark palettes are integrated in <CodeInline>MudTheme</CodeInline>. Just set <CodeInline>IsDarkMode</CodeInline> to <CodeInline>true</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverviewThemesDarkPaletteExampleSource)">
                <OverviewThemesDarkPaletteExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="System preference">
                <Description>With <CodeInline>GetSystemPreference()</CodeInline> you can get the user defined dark theme preference. Returns <CodeInline>true</CodeInline> if dark mode is preferred.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverviewThemesSystemPreferenceExample)"/>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Watch system preference">
                <Description><CodeInline>WatchSystemPreference(Func)</CodeInline> calls Func when the system preferences change. <CodeInline>true</CodeInline> if dark mode is preferred.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverviewThemesWatchSystemPreferenceExample)"/>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Custom Themes">
                <Description>To customize the theme, you need to give the ThemeProvider a new <CodeInline>MudTheme</CodeInline> class with the settings you want to change.
                    <CodeInline>PaletteLight</CodeInline> defines the color of the Light Palette. <CodeInline>PaletteDark</CodeInline> on the other hand defines the colors of
                    the Dark Palette.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverviewThemesCustomExample)" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>